<script setup>
import { ref, onMounted } from 'vue'
import { recentReserve, reservePage, reservePageNum } from '@/utils/api'
import { ElMessage, ElMessageBox } from 'element-plus';
let areaId = '';

const yylist = ref([]);
const list = ref([]);
const date = ref(new Date());
const pageNum = ref(1);
const currentPage = ref(1);
const totalElements = ref(0);
const Elements = ref(0);
const getrecentReserve = async () => {
    let res = await recentReserve(areaId)
    if (res.code == '200') {
        yylist.value = res.data;
    }
}

const getDay = () => {
    let date = new Date();
    let year = date.getFullYear();
    let month = (date.getMonth() + 1) > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
    let day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate();

    return year + "-" + month + "-" + day;
}


const gettime = (date) => {
    if (date != null && date != '') {
        let year = date.getFullYear();
        let month = (date.getMonth() + 1) > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
        let day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate();
        return year + "-" + month + "-" + day;
    }
}


const getreservePage = async () => {
    let params = {
        areaId: areaId,
        date: gettime(date.value),
        pageNum: pageNum.value,
        pageSize: 10
    }
    let res = await reservePage(params)
    if (res.code == '200') {
        list.value = res.data.content;
        totalElements.value = res.data.totalElements;
    }
}

const getreservePageNum = async () => {
    let params = {
        areaId: areaId,
        date: gettime(date.value)
    }
    let res = await reservePageNum(params)
    if (res.code == '200') {
        Elements.value = res.data;
    }
}

const handleSizeChange = (val) => {
    pageNum.value = val;
    getreservePage();
};

onMounted(() => {
    areaId = window.sessionStorage.getItem('areaId');
    getrecentReserve();
    getreservePage();
    getreservePageNum();

})

</script>
<template>
    <div class="wls-aut">
        <div class="wls-aut-title" style="justify-content: space-between;">
            <div style="font-weight: 700;"><span>预约管理</span></div>
        </div>

        <div class="wls-aut-container am">
            <div class="aml">
                <div class="wls-aut-title" style="justify-content: space-between;">
                    <div style="font-weight: 700;"><span>近7天入园情况</span></div>
                </div>

                <ul class="gardenList">
                    <li v-for="(i, index) in yylist" :key="index + 'hjfh'">
                        <div><span>{{ Object.keys(i)[0] }}</span></div>
                        <div><span style="color: #387BFF;font-weight: 700;">{{ Object.values(i)[0] }}人</span></div>
                    </li>
                </ul>
            </div>
            <div class="amr">
                <el-row>
                    <el-col :span="12" style="display: flex;align-items: center;">
                        <el-date-picker v-model="date" type="date" :clearable="false"
                            @change="getreservePage(); getreservePageNum()" placeholder="选择日期" size="large" />
                        <span style="margin:0  .16rem;font-weight: 700;">预约人数</span><span
                            style="font-weight: 700;color: #387BFF;">{{ Elements }}人</span>
                    </el-col>
                </el-row>
                <div style="height: .16rem;"></div>
                <table>
                    <thead>
                        <th>预约时间</th>
                        <th>预约人姓名</th>
                        <th>预约人手机号码</th>
                        <th>预约参观人数</th>
                    </thead>
                    <tbody>
                        <tr v-for="(i, index) in list" :key="i.id">
                            <td>{{ i.date }}</td>
                            <td>{{ i.userName }}</td>
                            <td>{{ i.phone }}</td>
                            <td>{{ i.userNum }}</td>
                        </tr>
                    </tbody>
                </table>

                <el-pagination v-model:current-page="currentPage" :page-size="10" :pager-count="5" :small="true"
                    :disabled="false" background layout="total, prev, pager, next, jumper" :total="totalElements"
                    @current-change="handleSizeChange" />
            </div>
        </div>

    </div>
</template>
<style scoped>
.am {
    display: flex;
    background-color: transparent;
}

.aml {
    height: 100%;
    flex: 2;
    padding: .24rem;
    flex-shrink: 0;
    background-color: #fff;
}

.amr {
    height: 100%;
    flex: 8;
    position: relative;
    padding: .24rem;
    margin-left: 0.16rem;
    flex-shrink: 0;
    background-color: #fff;
}

.gardenList {
    width: 100%;
    overflow: hidden;
}

.gardenList>li {
    width: 100%;
    height: .5rem;
    margin-bottom: .16rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #F5F7FA;
    cursor: pointer;
}
</style>
